<template>
    <div class="header-placeholder"></div>
    <div class="header">
        <slot name="left" v-if="slots.left"></slot>
        <template v-else>
            <div class="back" @click="onBack" v-if="route?.meta?.showBack">
                <img :src="`${_oss_}images/mobile/header/back-icon.png`" />
            </div>
        </template>
        <div class="title" v-if="!slots.default">
            {{ pageName || pageStore.pageName }}
        </div>
        <slot v-else></slot>
        <div class="message-remind" v-if="Object.values(userStore.messageLog).some(Boolean)"
            @click="jumpPath('/message/1.html')">
            <img :src="`${_oss_}images/mobile/icon-msg-remind.svg`" />
        </div>
        <div class="list-icon" @click="onShowMenus" v-if="props.showMenu">
            <img :src="`${_oss_}images/mobile/header/list-icon.png`" />
        </div>
    </div>

    <div class="menu-mask" :class="{ 'is-show': isShow }" @click="onCloseMenus" v-if="props.showMenu">
        <div class="menu-header" @click.stop>
            <div class="logo-icon">
                <img :src="`${_oss_}images/logo.png`" />
            </div>
            <div class="close-btn" @click="onCloseMenus">
                <img :src="`${_oss_}images/mobile/header/close-icon.png`" />
            </div>
        </div>

        <div class="menu-list" @click.stop>
            <template v-for="(item, index) in Menus" :key="item.name">
                <div class="menu-list__sub" v-if="item.children && item.children.length && item.show">
                    <div class="menu-list__item" :class="{
                        active: expandList.includes(index),
                    }" @click="onExpand(index)">
                        {{ item.name }}
                        <el-icon size="16" color="#666">
                            <ArrowDown />
                        </el-icon>
                    </div>

                    <div class="menu-list__children">
                        <template v-for="cItem in item.children" :key="cItem.name">
                            <div class="menu-list__item" @click="
                                cItem.click
                                    ? cItem.click()
                                    : jumpPath(cItem.path)
                                " v-if="cItem.show">
                                {{ cItem.name }}
                            </div>
                        </template>
                    </div>
                </div>

                <div class="menu-list__item" :class="{
                    'login-button': item.path === '/login.html',
                }" v-else-if="item.show" @click="item.click ? item.click() : jumpPath(item.path)">
                    {{ item.name }}

                    <var-button @click.stop="onQuit()" class="quit-button" type="primary" size="small"
                        v-if="item.name == '个人中心'">
                        退出登录
                    </var-button>
                </div>
            </template>
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue";
import { GetMenus } from ".";
import { ArrowDown } from "@element-plus/icons-vue";
import { UserLogout } from "~/api";
import { connectSocket } from "~/utils/socket";

const isShow = ref(false);
const expandList = ref([]);

const route = useRoute();
const router = useRouter();
const pageStore = usePageStore();
const userStore = useUserStore();
let Menus = ref([]);

const props = defineProps({
    pageName: {
        type: String,
        default: "",
    },
    showMenu: {
        type: Boolean,
        default: true,
    },
});

const slots = useSlots();

const jumpPath = (path) => {
    if (path) {
        navigateTo(path);
        onCloseMenus();
    }
};

const onBack = () => {
    router.back();
};

const onExpand = (index) => {
    if (expandList.value.includes(index)) {
        expandList.value = expandList.value.filter((idx) => idx !== index);
    } else {
        expandList.value.push(index);
    }
};

watch(isShow, () => {
    Menus.value = GetMenus(onCloseMenus);
});

const onQuit = async () => {
    await UserLogout();
    userStore.CLEAR_USERINFO();
    onCloseMenus();
    connectSocket();
    navigateTo("/");
};

const onShowMenus = () => {
    isShow.value = true;
    pageStore.isBlur = true;
};

const onCloseMenus = () => {
    isShow.value = false;
    pageStore.isBlur = false;
};
</script>
<style lang="scss" scoped>
@keyframes fade {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 44px;
    background-color: #fff;
    display: flex;
    align-items: center;
    z-index: 99;

    &-placeholder {
        height: 44px;
    }

    .back {
        margin-left: 15px;

        img {
            width: 8px;
        }
    }

    .title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #333;
        font-size: 15px;
        font-weight: 600;
    }

    .message-remind {
        position: absolute;
        top: 50%;
        right: 45px;
        transform: translateY(-50%);
        animation: fade 1s infinite;

        img {
            width: 30px;
            height: 30px;
        }
    }

    .list-icon {
        margin-left: auto;
        margin-right: 20px;
        width: 16.5px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}

.menu-mask {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 120vw;
    top: 0;
    z-index: 9999;
    opacity: 0;
    background-color: rgba($color: #000000, $alpha: 0.3);
    will-change: transform, backdrop-filter, opacity;
    transition: all 0.5s;

    &.is-show {
        transform: translate3d(-120vw, 0, 0);
        opacity: 1;
        // backdrop-filter: blur(4px);
    }

    .menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 44px;
        padding-left: 15px;
        background-color: #fff;

        .logo-icon {
            width: 89.5px;

            img {
                width: 100%;
            }
        }

        .close-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            background-color: #5085fb;

            img {
                width: 14.5px;
                height: 14.5px;
            }
        }
    }

    .menu-list {
        width: 100vw;
        background-color: #fff;
        line-height: 47px;

        &__item {
            position: relative;
            display: flex;
            align-items: center;
            font-size: 13px;
            padding: 0 20px;
            border-bottom: 1px solid #e7e7e7;
            color: #333;

            &.login-button {
                color: #5185fb;
            }

            .quit-button {
                margin-left: auto;
            }

            &.active {
                .el-icon {
                    transform: rotate(180deg);
                }

                +.menu-list__children {
                    display: block;
                }
            }

            .el-icon {
                margin-left: auto;
                will-change: transform;
                transition: all 0.3s;
            }
        }

        &__children {
            display: none;

            .menu-list__item {
                padding-left: 40px;
            }
        }
    }
}
</style>
